<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>所有文章列表 - WeiLanBlog</title>
    <link href="https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@400;500;600&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'SF Pro Display', Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

       .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        h1 {
            text-align: center;
            color: #0078d7;
        }

       .search-container {
            text-align: center;
            margin-bottom: 20px;
        }

       .search-container input {
            padding: 10px;
            width: 300px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

       .search-container button {
            background-color: #0078d7;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin-left: 10px;
        }

       .post-list {
            list-style-type: none;
            padding: 0;
        }

       .post-item {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            padding: 20px;
        }

       .post-item h2 {
            margin-top: 0;
            color: #333;
        }

       .post-item p {
            color: #666;
            margin-bottom: 10px;
        }

       .post-item a {
            display: inline-block;
            color: #0078d7;
            text-decoration: none;
            margin-right: 10px;
        }

       .post-item a:hover {
            text-decoration: underline;
        }

       .action-buttons {
            margin-top: 10px;
        }

       .action-buttons button {
            background-color: #0078d7;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
            margin-right: 5px;
        }

       .pagination {
            display: flex;
            justify-content: center;
            margin-top: 40px;
        }

       .pagination a {
            display: inline-block;
            padding: 10px 20px;
            margin: 0 5px;
            background: #0078d7;
            color: white;
            border-radius: 5px;
            text-decoration: none;
            transition: background-color 0.3s ease;
        }

       .pagination a:hover {
            background: #0056b3;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>所有文章列表 - WeiLanBlog</h1>
        <div class="search-container">
            <input type="text" id="searchInput" placeholder="搜索文章标题、作者等">
            <button onclick="searchPosts()">搜索</button>
        </div>
        <ul class="post-list" id="postList"></ul>
        <div class="pagination" id="pagination"></div>
    </div>

    <script>
        // 每一页显示的文章数量
        const postsPerPage = 5;
        let currentPage = 1;
        let allPosts = [];

        function displayPosts() {
            const postList = document.getElementById('postList');
            postList.innerHTML = '';

            const startIndex = (currentPage - 1) * postsPerPage;
            const endIndex = startIndex + postsPerPage;
            const currentPosts = allPosts.slice(startIndex, endIndex);

            currentPosts.forEach(post => {
                postList.appendChild(post);
            });

            // 生成分页按钮
            const pagination = document.getElementById('pagination');
            pagination.innerHTML = '';

            const totalPages = Math.ceil(allPosts.length / postsPerPage);
            for (let i = 1; i <= totalPages; i++) {
                const pageButton = document.createElement('a');
                pageButton.textContent = i.toString();
                pageButton.href = '#';
                pageButton.addEventListener('click', () => {
                    currentPage = i;
                    displayPosts();
                });
                if (i === currentPage) {
                    pageButton.style.backgroundColor = '#0056b3';
                }
                pagination.appendChild(pageButton);
            }
        }

        function searchPosts() {
            const searchInput = document.getElementById('searchInput').value.toLowerCase();
            const filteredPosts = allPosts.filter(post => {
                const title = post.querySelector('h2').textContent.toLowerCase();
                const author = post.querySelector('p:contains("作者:")').textContent.toLowerCase();
                return title.includes(searchInput) || author.includes(searchInput);
            });
            allPosts = filteredPosts;
            currentPage = 1;
            displayPosts();
        }

        window.onload = function () {
            fetch('blog/')
               .then(response => response.text())
               .then(data => {
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(data, 'text/html');
                    const links = doc.querySelectorAll('a');
                    const posts = [];

                    links.forEach(link => {
                        const fileName = link.textContent;
                        if (fileName.endsWith('.html')) {
                            fetch('blog/' + fileName)
                               .then(postResponse => postResponse.text())
                               .then(postData => {
                                    const postParser = new DOMParser();
                                    const postDoc = postParser.parseFromString(postData, 'text/html');
                                    const title = postDoc.querySelector('h1').textContent;
                                    const author = postDoc.querySelector('p:contains("作者:")').textContent.replace('作者: ', '');
                                    const time = postDoc.querySelector('p:contains("发布时间:")').textContent.replace('发布时间: ', '');
                                    const category = postDoc.querySelector('p:contains("分类:")')? postDoc.querySelector('p:contains("分类:")').textContent.replace('分类: ', '') : '未分类';

                                    const postItem = document.createElement('li');
                                    postItem.classList.add('post-item');

                                    const titleElement = document.createElement('h2');
                                    titleElement.textContent = title;

                                    const authorElement = document.createElement('p');
                                    authorElement.textContent = `作者: ${author}`;

                                    const timeElement = document.createElement('p');
                                    timeElement.textContent = `发布时间: ${time}`;

                                    const categoryElement = document.createElement('p');
                                    categoryElement.textContent = `分类: ${category}`;

                                    const readMoreLink = document.createElement('a');
                                    readMoreLink.href = 'blog/' + fileName;
                                    readMoreLink.textContent = '阅读全文';

                                    const editButton = document.createElement('button');
                                    editButton.textContent = '编辑';
                                    editButton.addEventListener('click', () => {
                                        window.location.href = 'edit.php?file=' + fileName;
                                    });

                                    const deleteButton = document.createElement('button');
                                    deleteButton.textContent = '删除';
                                    deleteButton.addEventListener('click', () => {
                                        if (confirm('确定要删除这篇文章吗？')) {
                                            fetch('delete.php?file=' + fileName, {
                                                method: 'DELETE'
                                            })
                                               .then(response => {
                                                    if (response.ok) {
                                                        postItem.remove();
                                                        displayPosts();
                                                    } else {
                                                        alert('删除失败');
                                                    }
                                                });
                                        }
                                    });

                                    const actionButtons = document.createElement('div');
                                    actionButtons.classList.add('action-buttons');
                                    actionButtons.appendChild(editButton);
                                    actionButtons.appendChild(deleteButton);

                                    postItem.appendChild(titleElement);
                                    postItem.appendChild(authorElement);
                                    postItem.appendChild(timeElement);
                                    postItem.appendChild(categoryElement);
                                    postItem.appendChild(readMoreLink);
                                    postItem.appendChild(actionButtons);

                                    posts.push(postItem);
                                })
                               .catch(error => {
                                    console.error('读取文章内容失败:', error);
                                });
                        }
                    });

                    allPosts = posts;
                    displayPosts();
                })
               .catch(error => {
                    console.error('读取文章列表失败:', error);
                });
        };
    </script>

</body>

</html>
